<template>
<!-- 新闻详情页 -->
  <div>
      <div class="header">
      <!-- 标题开始 -->
      <van-nav-bar :title="newsDetail.category+'新闻'">
        <template #left>
          <van-icon @click="goBack" name="arrow-left" size="18" />
        </template>
      </van-nav-bar>
      <!-- 标题结束 -->
      </div>

      <!-- 内容开始 -->
      <div class="news-detail-wrapper">
          <h1>{{newsDetail.title}}</h1>
          <div class="info">
              <span>{{newsDetail.time}}</span>
              <span>{{newsDetail.src}}</span>
          </div>
          <van-image
            width="100%"
            height="auto"
            :src="newsDetail.pic"
            />
            <div class="my-content" v-html="newsDetail.content"></div>
      </div>
      <!-- 内容结束 -->
  </div>
</template>

<script>
export default {
  data () {
    return {
        newsDetail:''
    }
  },
  methods: {
      goBack(){
          this.$router.go(-1)
      }
  },
  mounted() {
      this.$http("/getNewsInfo",'get',{
          id:this.$route.params.id
      }).then(res=>{
          console.log(res)
          this.newsDetail=res
      }).catch(err=>{
          console.log(err)
      })
  },
}

</script>
<style lang='scss' scoped>
 .header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    .van-nav-bar{
      height: 40px;
      background-color: #d2691e;
      /deep/ .van-nav-bar__content{
        height: 40px;
      }
      .van-icon{
        color:#fff;
      }
      /deep/ .van-nav-bar__title{
        font-size: 20px;
        color: #fff;
      }
    }
  }

  .news-detail-wrapper{
      margin-top: 40px;
      padding: 20px;
      h1{
          font-weight: 700;
          font-size: 23px;
          line-height: 35px;
          text-align: center;
      }
      .info{
          text-align: center;
          font-size: 12px;
          color: #999;
          margin: 20px 0;
      }
      .my-content{
          margin-top: 20px;
      }
      /deep/ video{
          width: 100%;
      }
      /deep/ img{
          width: 100%;
      }
  }
</style>